<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title>Equalizer</Title>
		<meta Name="Generator" Content=""/>
		<meta Name="Author" Content="Sven Hecht"/>
		<meta Name="Keywords" Content=""/>
		<meta Name="Description" Content=""/>
		<style type="text/css">
			.spiffy{display:block}
			.spiffy *{
				display:block;
				height:1px;
				overflow:hidden;
				font-size:.01em;
				background:#808080}
			.spiffy1{
				margin-left:3px;
				margin-right:3px;
				padding-left:1px;
				padding-right:1px;
				border-left:1px solid #723737;
				border-right:1px solid #723737;
				background:#7a6060}
			.spiffy2{
				margin-left:1px;
				margin-right:1px;
				padding-right:1px;
				padding-left:1px;
				border-left:1px solid #6a0c0c;
				border-right:1px solid #6a0c0c;
				background:#7b6767}
			.spiffy3{
				margin-left:1px;
				margin-right:1px;
				border-left:1px solid #7b6767;
				border-right:1px solid #7b6767;}
			.spiffy4{
				border-left:1px solid #723737;
				border-right:1px solid #723737}
			.spiffy5{
				border-left:1px solid #7a6060;
				border-right:1px solid #7a6060}
			.spiffyfg{
				background:#808080}
		</style>
		<script type="text/javascript" src="prototype%201.5.0.js"></script>
		<script type="text/javascript">
			var equalizerArray = new Array('5', '7','8','10','12','13','15','16','18','19','22','23','24','28','29','30','32','33','36','37','40','44','45');
			var equalizerlowArray = new Array('5', '6','7','8','9','10','11','12','13','14','15','16','17','18','19','20');

			var barwidth = 40;
			var barheight = 50;
			var bars = 10;
			var speed = 100;
			var bararray;
			var low = false;
			var barcolor = '#AAAAAA';

			function init()
			{
				var eq = $('eqcontent');
				if (eq) {
					bararray = new Array();
					var eqPos = Position.cumulativeOffset(eq);
					eq.style.backgroundColor = '';
					eq.style.zIndex = '1';
					var bar;
					for (var i=0; i<bars; i++)
					{
						bar = document.createElement('div');
						bar.style.backgroundColor = barcolor;
						bar.style.height = barheight+'px';
						bar.style.width = (barwidth/bars)+'px';
						//bar.style.bottom = '0px';
						bar.style.position = 'absolute';
						bar.style.left = (i*(barwidth/bars)+eqPos[0]+i)+'px';
						bar.style.display = 'block';
						bar.style.zIndex = '1';
						bar.innerHTML = '&nbsp;';
						eq.appendChild(bar);
						bararray[i] = bar;
					}
				}
				setTimeout("equalize()", speed);
			}

			function equalize()
			{
				if (bararray.length > 0)
				{
					var equalizer;
					var dataarray = low?equalizerlowArray:equalizerArray;
					for (var i=0; i<bararray.length; i++)
					{
						equalizer = eval(dataarray[Math.round((dataarray.length-1)*Math.random())]);
						bararray[i].style.height = equalizer+'px';
					}
					setTimeout("equalize()", speed);
				}
				$('speedspan').innerHTML = speed;
				$('lowspan').innerHTML = low;
			}

			function IncreaseSpeed()
			{
				speed-=50;
				$('speedspan').innerHTML = speed;
			}
			function DecreaseSpeed()
			{
				speed+=50;
				$('speedspan').innerHTML = speed;
			}
			function ToggleLow()
			{
				low = !low;
				$('lowspan').innerHTML = low;
			}
		</script>
	</head>
	<body onload="init()">

		<div id="eqcontent" style="position: absolute; left: 200px; top: 200px;"></div>

		<div style="position: absolute; left:250px; top: 150px; width: 500px;">
			<b class="spiffy">
				<b class="spiffy1">
					<b></b>
				</b>
				<b class="spiffy2">
					<b></b>
				</b>
				<b class="spiffy3"></b>
				<b class="spiffy4"></b>
				<b class="spiffy5"></b>
			</b>

			<div class="spiffyfg">
			<div style="height: 300px">&nbsp;</div>
			</div>

			<b class="spiffy">
			<b class="spiffy5"></b>
			<b class="spiffy4"></b>
			<b class="spiffy3"></b>
			<b class="spiffy2"><b></b></b>
			<b class="spiffy1"><b></b></b></b>
		</div>


		<div style="position: absolute; left: 550px; top: 200px;">
			<div onclick="IncreaseSpeed()" style="cursor: pointer; color: white; text-decoration: underline;">Faster</div>
			<div onclick="DecreaseSpeed()" style="cursor: pointer; color: white; text-decoration: underline;">Slower</div>
			<div onclick="ToggleLow()" style="cursor: pointer; color: white; text-decoration: underline;">Low</div>
			<br/>
			<div style="color: white;">Speed: <span id="speedspan"></span>ms</div>
			<div style="color: white;">Low: <span id="lowspan"></span></div>
		</div>
	</body>
</html>
